<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>notebook</title>
    </head>

    <body>

        <script src="../src/Vue2/vue.js"></script>
        
        <div id="app">

            <header class="header">
                <h1>sudo-dqr's notebook</h1>
                <input v-model="newTask" placeholder="请输入任务" class="new-todo" >
                <button class="add" @click="addTask">新增任务</button>
            </header>

            <section>

                <ul class="todo-list">
                    <li class="todo" v-for="(item, index) in list" :key="item.id">
                        <div class="view">
                            <span class="index">{{ index + 1 }}.</span>
                            <label>{{ item.name }}</label>
                            <button class="destroy" @click="del(item.id)"></button>
                        </div>
                    </li>
                </ul>
                <div class="footer" v-show="list.length > 0">
                    <span class="cnt"> <strong>{{ list.length }}</strong> 个任务</span><br>

                    <button @click="clr" class="clear-completed">
                        清空所有任务
                    </button>
                </div>
            </section>
        </div>

        <script>
            const app = new Vue({
                el: '#app',
                data: {
                    list: [
                        {id: 1, name: '跑步一公里'},
                        {id: 2, name: '跳绳20Min'},
                        {id: 3, name: '仰卧起坐50个'},
                    ],
                    newTask: '',
                    newId: 4
                },
                methods: {
                    del(id) {
                        this.list = this.list.filter(item => item.id !== id)
                    },
                    addTask() {
                        if (this.newTask === '') {
                            alert('你他妈输入一个空的新建什么鬼')
                            return
                        }
                        this.list.unshift({
                            id: this.newId++,
                            name: this.newTask
                        })
                        this.newTask = ''
                    },
                    clr() {
                        this.list = []
                    }
                },
            })
        </script>
    </body>
</html>